<template>
  <details-layout :headerImageUrl="img">
	<div class="margin">
	  <div class="bar">
	    <mt-button size="small" class="tag-z color">全部</mt-button>
	    <mt-button size="small" class="tag-z" v-for="(item4,index4) in relativeData.flmc" :key="`relative_${index4}`">{{item4.zlmc}}({{item4.zl_total}})</mt-button>
	  </div>
	  
    <details-group :title="item1.zlmc" :listLength="item1.zl_total" v-for="(item1,index1) in relativeData.flmc" :key="`relative_${index1}`">
      <ul class="box">
        <cardBlock v-for="(item2,index2) in item1.data" :key="`relative_${index2}`" class="car-item test-card"  :imgUrl="item2.rowArr[0].col_val ? `${BASE64_TYPE}${item2.rowArr[0].col_val}` : '/static/default/head.png'">
            <div slot="name" class="card-tags">
              <strong class="name">{{item2.rowArr[2].col_val}}</strong>
              <span class="tag" style="backgroundColor:#4B7FE5">{{item2.rowArr[1].col_val}}</span>
            </div>
            <div slot="tags" class="card-tags">
              <span class="tag" v-for="(item3,index3) in item2.rowArr[7].col_val" :key="`relative_${index3}`">{{item3}}</span>
            </div>
            <div class="info-grid" slot="data">
              <div class="grid-item align-left">
                <em>{{item2.rowArr[3].col_cn}}</em><span>{{item2.rowArr[3].col_val}}</span>
              </div>
              <div class="grid-item align-left">
                <em>{{item2.rowArr[5].col_cn}}</em><span style="color:#5077aa" v-init-tooltips="{
                  tableName: item2.tableName,
                  systemid: item2.systemid,
                  bsh: item2.rowArr[5].col_val,
                  bshlx: '001',
                  dalx: 'RY'
                }">{{item2.rowArr[5].col_val}}</span>
              </div>
              <div class="grid-item align-left">
                <em>{{item2.rowArr[4].col_cn}}</em><span>{{item2.rowArr[4].col_val}}</span>
              </div>
              <div class="grid-item align-left">  
                <em>{{item2.rowArr[6].col_cn}}</em><span>{{item2.rowArr[6].col_val}}</span>
              </div>
            </div>
        </cardBlock>
      </ul>
    </details-group>

	</div>

  </details-layout>

</template>

<script>
  import { mapState } from 'vuex'
  import detailsLayout from '../../components/details-layout'
  import detailsGroup from '../../components/details-group'
  import cardBlock from '../../components/card-block'
  
  export default {
    data() {
      return {
        idFeature: [
          {
            text: '档案',
            fn: this.jumpToId
          }
        ],
        id: ''
      }
    },
    components: {
      detailsLayout,
      detailsGroup,
      cardBlock
    },
    methods: {
      /**
       * 根据身份证号码 查找身份证信息并且调到身份证档案页面
       */
      jumpToId() {
        // 调到身份证档案页面
        this.$router.push('/person?sfzh=' + this.id)
      },
      /**
       * 得到身份证号码
       * @param id
       */
      getId(id) {
        this.id = id
      }
    },
    computed: {
      ...mapState('personStore', {
        relativeData: 'relativeData',
        img: 'img'
      })
    },
    created() {
    }
}
</script>
<style lang="scss"  scoped>
 @import "../../style/public";
.tag-z {
  margin-left: .8rem;
  font-size: .8rem;
  padding: 0 8px;
  height: 24px;
  vertical-align: middle;
  border-radius: 15px;
  color: #FFFFFF;
  background-color: #CCCCCC;
}
.color {
  background-color: #FF6600;
}
.p-title {
  height: 2.5rem;
  line-height: 2.5rem;
  margin-left: 2rem;
  margin-right: 1rem;
  font-size: 1.1rem;
  color: #0a0a0a;
  border-top: 1px solid #F3F3F3;
 }
 .p-title:before {
  font-size: 1.3rem;
  font-weight: 600;
  color: #46A3E8;
  content: '|';
  margin-right: .5rem;
 }
 .margin {
  margin-top: .5rem
 }
 .bar {
  border-bottom: 1px solid #f2f2f2;
  margin: 0.5rem 1rem 0rem 1rem;
  padding: 0rem 0 1rem 0;
 }

</style>